<template>
    <div class="book-list-first-root">
        <img ref="img" :src="books.src">
        <h3 class="name">{{books.name}}</h3>
        <p class="author">{{books.author}}</p>
    </div>
</template>

<script>

export default{
    props:{books:Object,
        imgWidth:{
            type:String,
            default:"21.3vw"
        },
        imgHeight:{
            type:String,
            default:"30.4vw"
        },
    }
    ,computed:{
        imgSize(){
            this.$refs.img.style.width = this.imgWidth;
            this.$refs.img.style.height = this.imgHeight;
        }
    },
    mounted(){
        this.imgSize;
    }

}
</script>


<style scoped>
    .book-list-first-root{
        overflow-y: hidden;
    }
    img{
        /* width: 21.3vw; */
        border-radius: 1.1vw;
        /*height: 30.4vw;*/
    }
    h3{
        margin-top: 3.6vw;
        font-size: 3.7vw;
        color: #666666;
    }
    p{
        margin-top:2vw;
        font-size: 3.2vw;
        color: #999999;
    }
</style>